<template>
	<conf-module-container-cameras :show-page-tools="true">
		<template #Slot-Conf-Module-Header>
			<p class="operations-title font-20-bold">摄像头管理</p>
		</template>

		<template #Slot-Conf-Module-Tools-Left>
			<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px">
				<div style="display: flex; align-items: center; gap: 8px">
					<global-input-search
						v-model:value="tableAttr.searchObj.name"
						placeholder="摄像头名称"
						style="width: 216px"
						allow-clear
						@search="setTableData(true)"
					></global-input-search>
					<a-select
						ref="select"
						v-model:value.trim="boxDeviceId"
						style="width: 216px"
						:options="BelongingBoxList"
						max-tag-count="responsive"
						placeholder="所属盒子"
						allow-clear
						@change="changeBoxSerial"
					></a-select>
					<a-select
						ref="select"
						v-model:value.trim="aiSrvIds"
						style="width: 216px"
						:options="AIServiceList"
						class="AI-serviceList"
						:class="[aiSrvIds.length && 'active']"
						mode="multiple"
						max-tag-count="responsive"
						placeholder="AI服务"
						allow-clear
						@change="handleSearch('aiSrvIds')"
					></a-select>
					<global-switch-tab :status-data="queryStatusList" @switch-tab="switchTab"></global-switch-tab>
				</div>
				<a-dropdown v-if="g6Permission.showBtn('add-camera')" v-model:open="addMenuDown" :trigger="'click'" :placement="'bottomRight'">
					<template #overlay>
						<a-menu>
							<a-menu-item key="1" class="menu-item" @click="PageButtonClick('add-camera')"> 单独新增 </a-menu-item>
							<a-menu-item key="2" class="menu-item" @click="openBatchAddModal"> 批量新增 </a-menu-item>
						</a-menu>
					</template>
					<a-button type="primary" class="right-add-button">
						新增
						<down-outlined v-if="!addMenuDown" class="add-right-icon"></down-outlined>
						<up-outlined v-else class="add-right-icon"></up-outlined>
					</a-button>
				</a-dropdown>
			</div>
		</template>

		<template #Slot-Conf-Module-Left>
			<div class="_tree">
				<div class="tree-page-left">
					<div class="_top">
						<div class="tree-left-header font-14-bold">场景位置</div>
						<div style="cursor: pointer" @click="PageButtonClick('add-default-area')">+</div>
					</div>

					<global-tree :tree-data="treeData" :default-icon="true" :expand-action="'click'" @select="selectTree">
						<template #Slot-Menu-Icon="{ node }">
							<a class="expand-dropdown-link" @click.stop>
								<div class="device-num" style="vertical-align: baseline">
									<!-- ({{ cDeviceOnline(node.childrenCopy ? node.childrenCopy : node.children) || 0 }}/{{
										cDeviceTotal(node.childrenCopy ? node.childrenCopy : node.children) || 0
									}}) -->

									{{ `(${node.onLineChildrenCount}/${node.totalChildrenCount})` }}
								</div>

								<!-- <global-svg-icon
									icon-name="ellipsis"

									width="10px"
									height="10px"
									:scale="1.5"
								></global-svg-icon> -->
							</a>
						</template>
						<template #Slot-Menu-Btns="{ node }">
							<a-menu v-if="node.name !== '默认区域'" @click="({ key }) => PageButtonClick(key as string, node)">
								<a-menu-item key="edit-regional" v-if="g6Permission.showBtn('edit-regional')" class="menu-item">
									<p>编辑场景</p>
								</a-menu-item>
								<a-menu-item key="add-same-level-regional" v-if="g6Permission.showBtn('add-same-level-regional')" class="menu-item">
									<p>新增同级</p>
								</a-menu-item>
								<a-menu-item
									key="add-lower-level-regional"
									v-if="node.level !== 5 && g6Permission.showBtn('add-lower-level-regional')"
									class="menu-item"
								>
									<p>新增下级</p>
								</a-menu-item>
								<a-menu-item key="single-delete-regional" v-if="g6Permission.showBtn('single-delete-regional')" class="menu-item">
									<p>删除场景</p>
								</a-menu-item>
							</a-menu>
						</template>
					</global-tree>
				</div>
			</div>
		</template>
		<template #Slot-Conf-Module-Right>
			<div class="table-width">
				<global-table
					:data-source="tableAttr.data"
					:selected-row-keys="tableAttr.selectedKeys"
					:columns="columns"
					:show-operation="true"
					:x-scroll="1100"
					:use-select="true"
					@selected="(rowKeys: (string | number)[], node: any): any => ((tableAttr.selectedKeys = rowKeys), (nodes = node))"
				>
					<template #aiSrvCount="{ record }">
						<div class="ai-name">
							<div class="title-type">
								<div class="title-type-text">
									<div>
										<img v-if="record.aiSrvCount == 0" src="../../../../global-assets/imgs//AI0.png" style="width: 100%; height: 90%" />
										<img v-else src="../../../../global-assets/imgs//AI1.png" style="width: 100%; height: 90%" />
									</div>
									<div class="title-type-number">{{ record.aiSrvCount }}</div>
								</div>

								<!-- <span class="title-type-number"> {{ record.algorithmNameList ?? '暂无服务' }}</span> -->
							</div>
							<div class="tooltip-default-text">
								<a-tooltip placement="top" :title="record.algorithmNameList"> {{ record.algorithmNameList ?? '暂无服务' }}</a-tooltip>
							</div>
						</div>
					</template>
					<template #operation="{ record }">
						<div class="operations">
							<div
								v-if="g6Permission.showBtn('edit-camera')"
								class="font-14 operation-item-btn"
								@click="PageButtonClick('edit-camera', record)"
							>
								{{ '编辑' }}
							</div>
							<div v-if="g6Permission.showBtn('edit-camera')" class="font-14 operation-item-btn" @click="PageButtonClick('ai-set', record)">
								{{ '配置' }}
							</div>

							<div
								v-if="g6Permission.showBtn('single-delete')"
								class="font-14 operation-item-btn"
								@click="PageButtonClick('single-delete', record)"
							>
								{{ '删除' }}
							</div>
						</div>
					</template>

					<template #status="{ record }">
						<div class="item-status" :class="[record.status === 0 ? 'offLine' : 'onLine']">
							{{ record.status == 1 ? '在线' : '离线' }}
						</div>
					</template>
				</global-table>

				<global-pagination
					:style="{
						'padding-bottom': tableAttr.selectedKeys.length !== 0 ? '60px' : '0px'
					}"
					style="margin-left: 20px"
					:current="tableAttr.current"
					:page-size="tableAttr.pageSize"
					:total="tableAttr.total"
					@change="setTablePagination"
				></global-pagination>
			</div>
		</template>
		<template #Slot-Table-Batch-Operation>
			<global-table-batch-operation v-model:selected-rows="tableAttr.selectedKeys">
				<template #Slot-Table-Btns>
					<div class="_button">
						<div style="display: flex; align-items: center" @click="PageButtonClick('regional-set')">
							<global-svg-icon icon-name="share-forward-box-line" width="16px" height="16px" style="margin-right: 6px"></global-svg-icon>
							<p style="color: aliceblue">区域调动</p>
						</div>
					</div>
				</template>
			</global-table-batch-operation>
			<!-- </div> -->
		</template>
	</conf-module-container-cameras>
	<!-- 分组弹窗 -->
	<a-modal
		v-model:open="groupingCallVisible"
		:title="groupingModalTitle"
		:centered="true"
		width="416px"
		@ok="groupingCallOk"
		@cancel="groupingCancel"
	>
		<a-form ref="formRef" layout="vertical" class="operate-form" :model="groupingCallForm">
			<div v-if="type == 3" style="margin-bottom: 9px; color: #b0b5c0">需要调动的区域</div>

			<a-form-item v-if="groupingType" name="select" :rules="[{ required: true, message: '请选择分组' }]">
				<a-tree-select
					v-model:value="groupingCallForm.select"
					show-search
					style="width: 100%"
					:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
					placeholder="请选择分组"
					:field-names="{
						key: 'id',
						value: 'id',
						title: 'name',
						children: 'children'
					}"
					allow-clear
					tree-default-expand-all
					:tree-data="groupingTreeData"
				>
					<template #title="node">
						<a-tooltip>
							<template #title>{{ node.name }}</template>
							<p class="font-14 tree-node-title" style="margin-top: 4px">
								{{ node.name }}
							</p>
						</a-tooltip>
					</template>
				</a-tree-select>
			</a-form-item>
			<a-form-item v-else name="name">
				<div v-if="type == 1" style="margin: 9px; color: #b0b5c0">{{ lowerText }}/</div>
				<a-input v-model:value="groupingCallForm.areaName" autocomplete="off" :maxlength="10" placeholder="请输入"></a-input>
			</a-form-item>
		</a-form>
		<template #footer>
			<a-button size="small" class="btn-default" @click="groupingCancel">取消</a-button>

			<a-button v-if="oktext" size="small" type="primary" :loading="loading" @click="groupingCallOk">添加</a-button>
			<a-button v-else size="small" type="primary" @click="groupingCallOk">更改</a-button>
		</template>
	</a-modal>
	<batch-add-modal ref="batchAddModalRef" @close="setTableData(true)"></batch-add-modal>
</template>

<script setup lang="ts" name="cameras-table">
import { NavigationFailure } from 'vue-router';
import { g6UseTable } from 'glasssix-vue3-hooks';
import { g6Permission, g6StorageValue } from 'glasssix-utils-ts';
import { useDeleteModal } from '@/global-hooks/base.hooks';
import { arr2Str, exceedAuthority, getOnlineCount } from '@/global-utils/base.utils';
import { ConfModuleContainerCameras, BatchAddModal } from '../../components/index';
import { TsSelectOptItem } from '../../type';
import { CameraManagementAPI } from '../../api';
import { appStore } from '@/global-store/index';

const { WebSocketStore } = appStore;
const { SocketState } = WebSocketStore;
const loading = ref<boolean>(false);
const batchAddModalRef = ref(); // 批量添加弹窗

const { setOpenDeleteModal } = useDeleteModal();
const $message: any = inject('$message');
const router = useRouter();

const groupingCallVisible = ref(false); // 分组调用弹窗
const groupingModalTitle = ref('区域调动'); // 弹窗名称
const treeIsEdit = ref<boolean>(false); // 判断树新增还是编辑
const groupingCallForm = reactive({
	select: undefined,
	areaName: ''
});

const type = ref(1); // 用于判断是否是默认区域新增==>0: 从默认区域增加 1: 新增下级2: 新增同级     ===> 后面这两个用于前端判断的  3:调动区域   4:编辑
const lowerText = ref(''); // 新增下级时输入框前的文字（当前区域名）
const nodes = ref();
// 左侧树按钮弹窗 重置参数
const treeNowNode = reactive({});
const customFormat = (resData: any) => {
	tableAttr.allNums = resData.data.allNums;
	tableAttr.onlineNums = resData.data.onlineNums;
	tableAttr.outlineNums = resData.data.outlineNums;
	tableAttr.data = resData.data.records;
	tableAttr.total = resData.data.total;
};

const { tableAttr, setTableData, setTablePagination } = g6UseTable(CameraManagementAPI.list, {}, customFormat);

const columns: TsGlobalType.TsTableColumn[] = [
	{ dataIndex: 'name', title: '设备名称', width: 214, ellipsis: true },
	{ dataIndex: 'boxName', title: '所属盒子', width: 214, ellipsis: true },
	{
		dataIndex: 'status',
		title: '状态',
		width: 108,
		ellipsis: true,
		custom: true
	},
	{ dataIndex: 'areaLinkName', title: '所属区域', width: 170, ellipsis: true },
	{
		dataIndex: 'aiSrvCount',
		title: '已配置算法',
		ellipsis: true,
		custom: true
	}
];

/**
 * -----------------------搜索-----------------------
 */
const switchTab = (status: number | null): void => {
	tableAttr.searchObj.status = status;
	g6StorageValue.save('session', 'camerasSwitchTabStatus', status);
	setTableData(true);
};
// AI服务下拉数据
const aiSrvIds = ref<string[]>([]);
const AIServiceList = ref<TsSelectOptItem[]>([]);

const getAIServiceList = async (): Promise<void> => {
	let { data } = await CameraManagementAPI.AIServiceList();
	AIServiceList.value = data;
};

// 所属盒子boxDeviceId
const boxDeviceId = ref<any>();
const BelongingBoxList = ref<any>([]);
const getDeviceAreaList = async (): Promise<void> => {
	BelongingBoxList.value = [];
	let res: TsRes = await CameraManagementAPI.DeviceAreaList();
	console.log(res);

	res.data.forEach((item: any) => {
		BelongingBoxList.value[0] = { value: '', label: '全部' };

		BelongingBoxList.value.push({ value: item.serial, label: item.boxName });
	});
};
const changeBoxSerial = (val: any): void => {
	if (val === '') {
		console.log(11);
		boxDeviceId.value = null;
	}
	// g6StorageValue.save('session', 'camerasBoxSerial', val);
	tableAttr.searchObj.boxSerial = val;
	setTableData(true);
	// if (val === undefined) {
	// 	g6StorageValue.delete('session', 'camerasBoxSerial');
	// }
};
// 查询
const handleSearch = (key: string): void => {
	switch (key) {
		case 'aiSrvIds':
			// g6StorageValue.save('session', 'camerasaiSrvIds', aiSrvIds.value);
			tableAttr.searchObj.aiSrvIds = arr2Str(aiSrvIds.value);
			setTableData(true);
			if (aiSrvIds.value.length === 0) {
				// g6StorageValue.delete('session', 'camerasaiSrvIds');
			}
			break;
		default:
			break;
	}
};
/* ===========================================树操作开始=====================================*/
const treeData = ref([]);
const formRef = ref();
const groupingType = ref<boolean>();
const treeBtnSelect = ref();
const oktext = ref(true);

// 选中树查列表
const selectTree = async (id: number | string): Promise<void> => {
	tableAttr.searchObj.areaId = id;
	await setTableData(true);
};
// 添加下拉树形key,value
const addTreeAttribute = (arr: any): void => {
	for (let len = 0; len < arr.length; len++) {
		if (arr[len].children) {
			arr[len].disabled = true;
			addTreeAttribute(arr[len].children);
		}
	}
};

const treeDataFilter = (treeData: any) => {
	treeData.forEach((item: any) => {
		item.totalChildrenCount = !item.totalChildrenCount ? 0 : item.totalChildrenCount;
		item.onLineChildrenCount = !item.onLineChildrenCount ? 0 : item.onLineChildrenCount;

		if (item.children && item.children.length) {
			if (item.children[0].type === 0) {
				item.childrenCopy = item.children;
				item.children = null;
			} else {
				treeDataFilter(item.children);
			}
		}
	});
	return treeData;
};

const getTreeData = async (): Promise<void> => {
	// 树接口数据
	const res: TsRes = await CameraManagementAPI.treeData();
	if (res.code === 0) {
		treeData.value = treeDataFilter(res.data);

		console.log('树数据', treeData.value);
	}
};

// 区域调动树（有禁用）
const groupingTreeData = ref([]);
const getgroupingTreeData = async (): Promise<void> => {
	// 树接口数据
	const res: TsRes = await CameraManagementAPI.treeData();
	if (res.code === 0) {
		groupingTreeData.value = treeDataFilter(res.data);
		addTreeAttribute(groupingTreeData.value);
	}
};
// 树按钮接口参数
// eslint-disable-next-line max-params
const addGroup = async (node: any, isEdit: boolean, btnId: number, type: number): Promise<void> => {
	let res: TsRes = {};
	if (isEdit) {
		let params = {
			areaName: groupingCallForm.areaName,
			id: node.id,
			level: node.level
		};
		res = await CameraManagementAPI.editGroup(params);

		console.log(params, 'edit');
	} else {
		if (type === 0) {
			let params = {
				areaName: groupingCallForm.areaName,
				type: type,
				parentIdOrId: 0,
				level: 1
			};
			res = await CameraManagementAPI.addGroup(params);
		} else {
			let params = {
				areaName: groupingCallForm.areaName,
				type: type,
				parentIdOrId: btnId === 1 ? node.id : node.parentId,
				level: btnId === 1 ? node.level + 1 : node.level
			};
			res = await CameraManagementAPI.addGroup(params);
		}
	}
	if (res.code === 0) {
		loading.value = false;

		groupingCallVisible.value = false;
		formRef.value.resetFields();
		getTreeData();
		getgroupingTreeData();
		if (isEdit) {
			$message.success('编辑成功');
		} else {
			$message.success('新增成功');
		}
	}
};
const groupingCancel = (): void => {
	groupingCallVisible.value = false;
};
// 分组调用弹窗确认
const groupingCallOk = (): void => {
	loading.value = true;

	formRef.value
		.validate()
		.then(async () => {
			try {
				if (groupingType.value) {
					// 调动分组接口

					let params = {
						deviceVOList: nodes.value.map((v: any) => v),
						otherId: Number(groupingCallForm.select)
					};

					const res: TsRes = await CameraManagementAPI.regionMove(params);
					if (res.code === 0) {
						groupingCallVisible.value = false;
						formRef.value.resetFields();
						loading.value = false;

						setTableData();
						await getTreeData();
						await getgroupingTreeData();
					}
				} else {
					// 树按钮新增接口
					addGroup(treeNowNode, treeIsEdit.value, treeBtnSelect.value, type.value);
				}
			} catch (error) {
				//
				// eslint-disable-next-line promise/always-return
			} finally {
				//
			}
		})
		.catch((error: any) => {
			console.log('表单提交验证错误', error);
		});
};

const F_TreeGrouping = (node: any, id: number): void => {
	if (id === 3) {
		groupingCallForm.areaName = node.name;
		groupingType.value = false;
		treeIsEdit.value = true;
	}
	Object.assign(treeNowNode, node);
	groupingType.value = false;
	groupingCallVisible.value = true;
};

/* ===========================================树操作结束=====================================*/
const addMenuDown = ref(false);
const openBatchAddModal = () => {
	batchAddModalRef.value.open();
	addMenuDown.value = false;
};

// 页面按钮click
const PageButtonClick = async (btnCode: string, record: Record<string, any> = {}): Promise<void | NavigationFailure> => {
	if (btnCode === 'add-camera') {
		return router.push('/config-manage/cameras/add');
	}
	if (btnCode === 'edit-camera') {
		addMenuDown.value = false;
		return router.push(`/config-manage/cameras/update?id=${record.id}&status=${record.status}`);
	}
	const deleteModalInfo = {
		title: '确认删除该摄像头？',
		okText: '删除',
		cancelText: '取消',
		contentText: '删除后将无法查看摄像头监控画面'
	};
	const deleteFun = async (): Promise<void> => {
		let res: TsRes = await CameraManagementAPI.deleteListCamera([record.id]);
		if (res.code === 0) {
			tableAttr.data = tableAttr.data.filter((row: Record<string, any>) => row.id !== record.id);
			tableAttr.total = tableAttr.total - 1;
			$message.success('删除成功');
			setTableData();
		}
	};
	if (btnCode === 'single-delete') {
		setOpenDeleteModal(deleteFun, deleteModalInfo);
	}
	if (btnCode === 'ai-set') {
		sessionStorage.setItem('url', record.deviceOriginalStreamingLocation);
		// return router.push(
		// 	`/config-manage/cameras/algorithm?cameraId=${record.id}&name=${record.name}&id=${record.boxDeviceId}&boxSerial=${record.boxSerial}&areaId=${record.areaId}
		// 	&item=${record.deviceOriginalStreamingLocation}&status=${record.status}`
		// );
		return router.push(`/config-manage/cameras/algorithm?cameraId=${record.boxSerial + '_' + record.id}&cameraType=${record.deviceType}`);
	}
	if (btnCode === 'add-default-area') {
		// 新增默认区域按钮
		type.value = 0;
		groupingCallVisible.value = true;
		groupingType.value = false;
		groupingCallForm.areaName = '';
		treeIsEdit.value = false;
		groupingModalTitle.value = '';
		groupingModalTitle.value = '添加场景';
	}

	const addLowerRegional = async (): Promise<void> => {
		groupingCallVisible.value = true;
	};
	// 区域调动
	if (btnCode === 'regional-set') {
		groupingCallVisible.value = true;
		groupingType.value = true;
		type.value = 3;
		groupingModalTitle.value = '区域调动';
		getgroupingTreeData();
	}
	if (btnCode === 'add-same-level-regional' || btnCode === 'add-lower-level-regional') {
		const btnId = btnCode === 'add-lower-level-regional' ? 1 : 2;
		treeIsEdit.value = false;
		type.value = btnId;
		groupingCallVisible.value = true;
		groupingCallForm.areaName = '';
		treeBtnSelect.value = btnId;
		groupingModalTitle.value = '添加场景';
		F_TreeGrouping(record, btnId);
		lowerText.value = record.name;
		oktext.value = true;

		if (btnCode === 'add-lower-level-regional' && record.hasDevice !== 0) {
			groupingCallVisible.value = false;
			setOpenDeleteModal(addLowerRegional, {
				title: '确认新增区域？新增区域后会把之前区域的摄像头自动划分到新区域下',
				okText: '确定',
				cancelText: '取消'
			});
		}
	}
	if (btnCode === 'edit-regional') {
		groupingCallVisible.value = true;
		type.value = 4;
		groupingModalTitle.value = '编辑';
		treeIsEdit.value = false;

		oktext.value = false;
		F_TreeGrouping(record, 3);
	}
	if (btnCode === 'single-delete-regional') {
		const deleteRegion = async (): Promise<void> => {
			let res: TsRes = await CameraManagementAPI.deleteRegion(record.id);
			if (res.code === 0) {
				$message.success('删除成功');
				getTreeData();
			}
		};
		setOpenDeleteModal(deleteRegion, {
			title: '确认删除该区域吗？',
			okText: '删除'
		});
	}
};

// 摄像头状态获取
const queryStatusList = computed(() => {
	let statusData = {
		allNum: tableAttr.allNums,
		onlineNum: tableAttr.onlineNums,
		offNum: tableAttr.outlineNums
	};
	return statusData;
});
onActivated(async () => {
	// tableAttr.searchObj.boxSerial =
	// 	g6StorageValue.get('session', 'camerasBoxSerial') !== undefined ? g6StorageValue.get('session', 'camerasBoxSerial') : undefined;
	// boxDeviceId.value =
	// 	g6StorageValue.get('session', 'camerasBoxSerial') !== undefined ? g6StorageValue.get('session', 'camerasBoxSerial') : undefined;
	// aiSrvIds.value = g6StorageValue.get('session', 'camerasaiSrvIds') !== undefined ? g6StorageValue.get('session', 'camerasaiSrvIds') : [];
	// tableAttr.searchObj.aiSrvIds = arr2Str(aiSrvIds.value);
	// tableAttr.searchObj.status = g6StorageValue.get('session', 'camerasSwitchTabStatus');
	await setTableData();
	await getTreeData();
	getAIServiceList();
	getDeviceAreaList();
	getgroupingTreeData();
});
const watchStop = watch(
	() => groupingCallForm.areaName,
	() => {
		groupingCallForm.areaName = groupingCallForm.areaName.replace(/\s+/, '');
	}
);

SocketState.ws.onmessage = (info: { data: string }) => {
	let obj = JSON.parse(info.data);
	if (obj) {
		exceedAuthority(obj);
		if (obj.message === 'BOX_NUMBER_MESSAGE') {
			setTableData(true);
		}
	}
};
onUnmounted(() => {
	watchStop();
});
</script>

<style lang="less" scoped>
.ant-select-tree-treenode-disabled {
	color: red !important;
}

.operate-form {
	padding: 40px;
	padding-bottom: 20px;
}

.AI-serviceList {
	width: 180px;

	&.active {
		width: 285px;
	}
}

.menu-item {
	background-color: none !important;

	p {
		color: @text02 !important;
	}
}

.ai-name {
	display: flex;
	align-items: center;
	color: @text01;

	.title-type {
		height: 16px !important;
		margin-right: 4px;
		border: 1px solid #a5a9b4;
		border-radius: 8px;
		line-height: 16px;
		color: #0d4cca;
		background: radial-gradient(80.85% 100% at 50% 100%, rgba(221, 235, 255, 0.2) 0%, rgba(234, 243, 255, 0) 100%), #121e30;

		.title-type-text {
			display: flex;
			width: 40px;
			height: 16px !important;
			margin-right: 4px;
			border-radius: 8px;
			padding: 8px 4px;
			font-size: 12px;
			font-weight: 700;
			justify-content: flex-end;
			align-items: center;
			gap: 4px;
		}

		.title-type-number {
			margin-bottom: 2px;
			font-family: 'Alimama FangYuanTi VF';
			font-size: 12px;
			font-weight: 400;
			font-style: normal;
			line-height: 20px; /* 142.857% */
			color: var(--text-01, #fff);

			/* 淡阴影/淡XS */
			text-shadow: 0 1px 4px rgba(2, 36, 59, 0.06);
		}
	}

	.operation-empty {
		&:hover {
			background: #b0b0b0;
			box-shadow: @shadowM;
		}
	}
}

.item-status {
	position: relative;

	&::before {
		position: absolute;
		top: 9px;
		left: -14px;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		content: '';
	}
}

.offLine {
	&::before {
		background: #ba3b29;
	}
}

.onLine {
	&::before {
		background: #56c763;
	}
}

.ant-select-selector {
	width: 216px !important;
	height: 36px !important;
	line-height: 36px !important;
}

.table-width {
	display: flex;
	width: calc(100% - 10px);
	height: calc(100vh - 76px - 44px - 180px);
	flex-direction: column;
	justify-content: space-between;
}

.operations-title {
	color: rgba(240, 246, 252, 0.95);
}

._tree {
	.tree-page-left {
		height: 100%;
		border-right: 0;
		border-bottom: 0;
		padding-left: -32px !important;
		color: @text02;

		._top {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.tree-left-header {
			height: 38px;
			padding: 4px 16px 4px 0;
			line-height: 30px;
		}
	}
}

.operations {
	display: flex;
	align-items: center;
	width: 100%;
	height: 0%;

	.operation-item-btn {
		min-width: 28px;
		height: 22px;
		color: @link01;

		&:hover {
			opacity: 0.85;
			cursor: pointer;
		}
	}
}

._button {
	display: flex;
	height: 36px;
	margin-left: 32px;
	border: 1px solid @borderColor02;
	border-radius: 6px;
	padding: 8px 16px;
	line-height: 36px;
	color: @text01;
	background: none;
	box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);
	justify-content: center;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

.tooltip-default-text {
	overflow: hidden;
	width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
}
</style>
